html {font-size: 10px;}
body{font-family:Arial;text-align:center;overflow: hidden;}

.game-score{font-size:5rem;margin:3rem auto;color: #fff;}
.game-container{background-color:#bbada0;border-radius:1rem;position:relative;margin:0 auto;width:50rem;height:50rem;}

.game-cell{border-radius:.6rem;background-color:#ccc0b3;position:absolute;}
.game-cell{width: 20%;height: 20%;}
.game-num{width:20%;height:20%;line-height:10rem;border-radius:.6rem;font-weight:bold;font-size:5rem;color:#fff;text-align:center;position:absolute;}
.game-num-2{background:#eee4da;color:#776e65;}
.game-num-4{background:#ede0c8;color:#776e65;}
.game-num-8{background:#f2b179;}
.game-num-16{background:#f59563;}
.game-num-32{background:#f67c5f;}
.game-num-64{background:#f65e3b;}
.game-num-128{background:#edcf72;font-size:4rem;}
.game-num-256{background:#edcc61;font-size:4rem;}
.game-num-512{background:#9c5;font-size:4rem;}
.game-num-1024{background:#33b5e5;font-size:3rem;}
.game-num-2048{background:#f53dbe;font-size:3rem;}
/*游戏结束*/
.game-over{width:100%;height:100%;position:absolute;border-radius:1rem;box-sizing:border-box;z-index:1;display:table;background:rgba(123,102,85,0.5)}
.game-over-info{display:table-cell;vertical-align:middle}
.game-over p{font-size:4.5rem;color:#fff;margin:2rem auto;}
.game-over a{cursor:pointer;background-color:rgba(103,82,65,0.6);display:block;margin:2rem auto;width:18rem;padding:1rem 1rem;font-size:2.5rem;color:#f7f2e5;border-radius:1rem;border:.1rem solid #978271;transition:all .2s}
.game-over a:hover{background-color:rgba(103,82,65,0.7);color:#fff}
.game-hide{display:none;}

.game_score_add{
    position: absolute;
    font-size: 3rem;
    color: gold;
    opacity:0;
    animation: scoreadd 0.5s linear;
}
@keyframes scoreadd {
    from {opacity: 1;}
    to {opacity: 0;transform: translate(-45px,-100%); transform: translate(5px,-100%);}
}

.game-num-show{
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: show 0.2s linear;
}
@keyframes show {
    0%{
        transform: scale(0.5);
    }
    100%{
        transform: scale(1);    
    }
}

/* 自适应 */
/* 1. 超小屏幕下*/
        
@media screen and (max-width: 767px) {
    html {font-size: 5px;}
    body{
        background-color: #523e4d;
    }
}
/* 小屏幕下  */
@media screen and (min-width: 768px) {
    html {font-size: 6px;}
    body{
        background-color: #423f52;
    }
}
/* 3. 中等屏幕下*/

@media screen and (min-width: 992px) {
    html {font-size: 8px;}
    body{
        background-color: #3c4d41;
    }
}
/* 4. 大屏幕下*/
@media screen and (min-width: 1200px) {
    html {font-size: 10px;}
    body{
        background-color: #24211f;
    }
    .game-score{font-size:2rem}
}
